<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  {% block meta %}
  <!-- block meta  -->{% endblock %}
  <!-- favicon -->
  <!-- favicon -->
  <link rel="shortcut icon" href="">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="static/bootstrap@4.6.1/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

  <link href="static/font-awesome/css/font-awesome.css" rel="stylesheet">
  <title>{% block title %} ? {% endblock %} | Website</title>
  <style>
    body {
      background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.7)), url('static/bg.jpg');
      background-size: cover;
      overflow-y: overlay;
    }

    body,
    wrapper {
      min-height: 100vh;
    }

    .flex-fill {
      flex: 1 1 auto;
    }

    main>.container {
      padding: 5px 15px 0;
    }

    .footer {
      background-color: #f5f5f5;
      padding: 15px;
      color: #444;
      border-top: 1px solid #d2d6de;
    }

    .footer>.container {
      padding-right: 15px;
      padding-left: 15px;
    }

    code {
      font-size: 80%;
    }

    /***
        Styles below are only required if you're using <iframe> fallback in
        addition to HTML5 drag & drop (only working in Firefox/Chrome/Opera 15+).
      ***/

    /* Essential FileDrop zone element configuration: */
    .fd-zone {
      position: relative;
      overflow: hidden;
      /* The following are not required but create a pretty box: */
      width: 15em;
      margin: 0 auto;
      text-align: center;
    }

    /* Hides <input type="file"> while simulating "Browse" button: */
    .fd-file {
      opacity: 0;
      font-size: 118px;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 1;
      padding: 0;
      margin: 0;
      cursor: pointer;
      filter: alpha(opacity=0);
      font-family: sans-serif;
    }

    /* Provides visible feedback when user drags a file over the drop zone: */
    .fd-zone.over {
      border-color: maroon;
      background: #eee;
    }

    *::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 10px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }

    *::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      background-color: skyblue;
      background-image: -webkit-linear-gradient(45deg,
          rgba(255, 255, 255, 0.2) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, 0.2) 50%,
          rgba(255, 255, 255, 0.2) 75%,
          transparent 75%,
          transparent);
    }

    *::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: #ededed;
      border-radius: 10px;
    }

    .content-header {
      position: relative;
      padding: 15px 15px 0 15px;
    }

    .content-header>h1 {
      margin: 0;
      font-size: 24px;
    }

    .content-header>h1>small {
      font-size: 15px;
      display: inline-block;
      padding-left: 4 px;
      font-weight: 300;
    }

    .content-header>.breadcrumb {
      float: right;
      background: transparent;
      margin-top: 0;
      margin-bottom: 0;
      font-size: 12px;
      padding: 7px 5px;
      position: absolute;
      top: 15px;
      right: 10px;
      border-radius: 2px;
    }

    .breadcrumb>li {
      display: inline-block;
    }

    .content-header>.breadcrumb>li>a {
      color: #444;
      text-decoration: none;
      display: inline-block;
    }

    .content-header>.breadcrumb>li+li:before {
      content: '>\00a0';
    }
  </style>
  {% block beforehead %}
  <!-- before head  -->{% endblock %}
</head>

<body>
  <wrapper class="d-flex flex-column">
    <!--header-->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="/">Website</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
          {% if __user__ and __user__.admin %}
          <li class="nav-item">
            <a class="nav-link" href="users">用户</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="blog">博客</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="records">日志</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="database">数据库</a>
          </li>
          {% endif %}
          <li class="nav-item">
            <a class="nav-link" href="clipboard">粘贴板</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="v2ray">V2ray</a>
          </li>
          <!--
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="/tools" id="tools" role="button" tabindex="-1"
              data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">工具</a>
            <div class="dropdown-menu" aria-labelledby="tools">
              {% for item in views %}
              <a class="dropdown-item" href="/{{ item }}">{{ item }}</a>
              {% endfor %}
            </div>
          </li>
        -->
        </ul>
        <div class="mr-5 d-flex justify-content-end align-items-center dropdown">
          {% if __user__ %}
          <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ __user__.name }}</a>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown01">
            <a class="dropdown-item" href="logout">logout</a>
          </div>
          {% else %}
          <a class="btn btn-sm btn-outline-secondary mr-3" href="register">注册</a>
          <a class="btn btn-sm btn-outline-secondary mr-3" href="login">登录</a>
          {% endif %}
        </div>
      </div>
    </nav>
    <!--header-->
    <!-- content -->
    <main class="flex-fill">
      {% block content %}
      {% endblock %}
    </main>
    <!-- // content -->
    <!--footer-->
    <footer class="footer">
      <div class="pull-right hidden-xs">
        <b>Version</b> 1.0.0
      </div>
      <strong>Copyright &copy; 2018-{{ 0 | datetime_filter() | range_slice(0, 4)}} <a href="#">Shadaileng
          Studio</a>.</strong> All rights
      reserved.
    </footer>
    <!--footer-->
  </wrapper>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="static/jquery@3.5.1/jquery-3.5.1.min.js"></script>
  <script src="static/bootstrap@4.6.1/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

  <script src="static/axios/axios.js"></script>

  <script>
    function get_cookie(name) {
      let cookies = []
      if (document.cookie.indexOf(';') >= 0) {
        cookies = document.cookie.split(';')
      } else {
        cookies.push(document.cookie)
      }
      for (index in cookies) {
        let parea = cookies[index].split('=')
        if (parea[0].trim() === name) return unescape(parea[1])
      }
      return null
    }
    function set_cookie(name, value) {
      // cookie = document.cookie
      // if (cookie.length > 0) {
      //     cookie += ';'
      // }
      cookie = ''
      cookie += name + '=' + escape(value)
      document.cookie = cookie
    }
    let scroll = get_cookie('scroll')
    if (scroll) {
      document.querySelector('html').scrollTo(0, Number(scroll))
    }
    window.onscroll = function (event) {
      set_cookie('scroll', document.querySelector('html').scrollTop)
    }
  </script>
  {% block beforebody %}
  <!-- before body  -->{% endblock %}
</body>

</html>
